import React from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './index.css'

export default class TodoClass extends React.Component {
  state = {
    todos: [
      {id: 1, name: '吃饭', done: false},
      {id: 2, name: '健身', done: false},
      {id: 3, name: '学习', done: false},
      {id: 4, name: '睡觉', done: false}
    ]
  }

  handleAddTodo = todoObj => {
    const {todos} = this.state
    const newTodos = [todoObj, ...todos]
    this.setState({todos: newTodos})
  }

  changeTodo = (id, done) => {
    const {todos} = this.state
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        todo.done = done
        return todo
      } else {
        return todo
      }
    })
    this.setState({todos: newTodos})
  }

  deleteTodo = id => {
    const {todos} = this.state
    const newTodos = todos.filter(todo => {
      return todo.id !== id
    })
    this.setState({todos: newTodos})
  }

  handleCheckAll = val => {
    const {todos} = this.state
    const newTodos = todos.map(todo => {
      todo.done = val
      return todo
    })
    this.setState({todos: newTodos})
  }

  clearDoneTodos = () => {
    const {todos} = this.state
    const newTodos = todos.filter(todo => {
      return !todo.done
    })
    this.setState({todos: newTodos})
  }

  render() {
    const {todos} = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header handleAddTodo={this.handleAddTodo}/>
          <List todos={todos} changeTodo={this.changeTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} handleCheckAll={this.handleCheckAll} clearDoneTodos={this.clearDoneTodos}/>
        </div>
      </div>
    )
  }
}
